<template>
  <div class="gameLevel all scroolBar " style="overflow-y: auto;">
    <!-- 筛选组件-->
    <div>
      <el-button type="primary" @click="openDialog"> 新增游戏等级</el-button>
    </div>

    <!-- 表格组件-->
    <div>
      <myTable :tabelHeader="tableHeader" :tableData="levelList" @tableCellClick="onMoudelMsg"></myTable>
    </div>
    <!-- 分页组件 -->
    <div class="workCenterRig">
      <table-paper :currPageNum="pageNum" :PagerOrder="PagerOrder"  @tablePaperEven="onMoudelMsg"  ></table-paper>
    </div>


    <!-- 对话框组件-->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      @close="handleClose">
      <div class="w90">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="游戏等级名称">
            <el-input v-model="form.levelName"></el-input>
          </el-form-item>

          <el-form-item label="游戏等级排序" >
            <el-input-number v-model="form.sort"  :min="1"  label="描述文字"></el-input-number>
          </el-form-item>

        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirmDialog">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
  import myTable from './../../components/yqq/table'
  import tablePaper from '../../components/yqq/tablePaper'
  import {
    getGamelevelList,
    postAddGamelevel,
    getGamelevelInfo,
    putRefleshGamelevel, getGameList, getGameInfo, deleteGameLevel, deleteGameType
  } from './api'
  import Cookies from 'js-cookie'
  var  adminName=Cookies.get('adminName')
  var  token=Cookies.get('token')
  export default {
    name: "gameLevel",
    components: {
      "myTable":myTable,
      tablePaper,
    },
    data(){
      return{
        form:{
          levelName:'', // |levelName |string |游戏等级 |
          sort:1,// |sort |int |排序 |
          gameId:null,//
        },

        title:"提示", //对话框标题
        dialogVisible:false,//对话框展示
        pageNum:1,//页码
        pageSize:10,//个数
        PagerOrder:{
          count:0,
        },
        tableHeader:[
          {
          type:'text',
          key:'levelName',
          value:'等级名称',
        }, {
            type:'text',
            key:'sort',
            value:'排序',
          },{
            type: 'button',
            key: 'primary',
            value: '操作',
            btnLis:[
              {
                name:'编辑',
                judeKey:'primary',
                judeValue:'primary',
                type:'edit',
                btntype:'primary',
              },
              {
                name:'删除',
                judeKey:'primary',
                judeValue:'primary',
                type:'delete',
                btntype:'danger',
              }
            ]}],
        levelList:[],//游戏等级列表

        gameId:null,  //游戏id
      }
    },
    created() {
      this.gameId = this.$route.query.gameId
      this.form.gameId = this.$route.query.gameId

      this.getGameLevelList()
    },

    methods:{
      //表格组件事件
      onMoudelMsg(data){
        // console.log(data)
        let btnType = data.type
        let itemData = data.data

        if (btnType=="edit"){
          this.title="编辑游戏等级"
          this.dialogVisible=true
          this.form={
            levelName:itemData.levelName, // |levelName |string |游戏等级 |
            sort:itemData.sort,// |sort |int |排序 |
            gameId:this.gameId,//
            levelId:itemData.levelId
          }
        }

        if(btnType == 'paperNumChange'){
          this.pageNum = itemData
          this.getGameLevelList()
        }

        if(btnType == 'delete'){
          this.$confirmMsg("确定删除吗？",'','',()=>{
            deleteGameLevel({levelId:itemData.levelId}) .then((res)=>{
              if (res.code==0){
                this.$notifyMsg("提示","删除成功！","success")
                this.getGameLevelList()
              }else {
                this.$notifyMsg("提示","删除失败!","error")
              }
            })
          },()=>{},)

        }
      },
      //获取等级列表
      getGameLevelList(){
        var getObj = {
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          gameId:this.gameId
        }

        getGamelevelList(getObj).then(res=>{
          // console.log("获取游戏列表",res)
          if (res.code==0){
            var vdata = res.data.list
            vdata.forEach((items,i)=>{
              items.primary = 'primary' //按钮默认显示
            })
            this.levelList = vdata
            this.PagerOrder={
              count:res.data.total,
              size:this.pageSize
            }
          }
        }).catch(err=>{
          // console.log(err)
        })
      },
      //对话框确认
      confirmDialog(){
        if (!!!this.form.levelName){
          this.$notifyMsg("警告","游戏等级名称不可为空!","error")
          return
        }else {
          if(this.form.hasOwnProperty("levelId")){
            putRefleshGamelevel(this.form).then(res=>{
              // console.log(res)
              if (res.code==0){
                this.$notifyMsg("提示","更新成功","success")
                this.getGameLevelList()
              }
              this.dialogVisible=false
            })
          } else {
            postAddGamelevel(this.form).then(res=>{
              // console.log(res)
              if (res.code==0){
                this.$notifyMsg("提示","新增成功","success")
                this.getGameLevelList()
              }
              this.dialogVisible=false
            })
          }
        }
      },
      //新增对话框
      openDialog(){
        this.title="新增游戏等级"
        this.dialogVisible=true
      },
      //对话框关闭
      handleClose(){
        this.form={
          levelName:'', // |levelName |string |游戏等级 |
          sort:1,// |sort |int |排序 |
          gameId:this.gameId
        }
      },
    },

  }
</script>

<style scoped>
  .gameLevel .el-input { width:auto;}
  .gameLevel .el-input-number{width: auto}
  .gameType::-webkit-scrollbar {
    display: block;
  }
  .gameLevel .avatar-uploader .el-upload {
    border: 1px dashed lightgray;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .gameLevel .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .gameLevel .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .gameLevel .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
